<template>
  <div class="app-container">
    <Navbar @navbarMenuTap="navbarMenuTapHandler" :openStatus="open"></Navbar>
    <MyMenu @menuCloseTap="menuCloseTapHandler" :openStatus="open" :menuList="state.sidebarMenu"></MyMenu>
  </div>
</template>

<script lang="ts" setup>
import { reactive, onMounted, ref } from "vue";
import MyMenu from "@/components/menu/menu.vue";
import Navbar from "@/components/navbar/navbar.vue";
import { useStore } from "vuex";

const store = useStore();
let arr = store.getters.getMenu;
arr.push({
    path: "quit",
    name: "quit",
    meta: {
        name: "退出登录",
        icon: "Paperclip",
    },
})
let state = reactive({
    sidebarMenu: arr,
});
const open = ref(false);

onMounted(() => { });

const navbarMenuTapHandler = (bool: boolean) => {
    console.log('菜单点击:' + bool);
    open.value = bool;
}

const menuCloseTapHandler = (bool: boolean) => {
    open.value = bool;
}
</script>

<style lang="scss">
.app-container {
    height: 100%;
}
</style>
